CAPTCHAのアクセシビリティ問題をCloudflare Turnstileは解決するか

CAPTCHAのアクセシビリティ問題をCloudflare Turnstileは解決するか

Webフォームに対して、人間のアクセスとロボットのアクセスを見分ける技術として、CAPTCHAやパズル認証などが持ちいられてきました。 これらは主に、歪められて模様が追加された画像化文字を目で読んでキーボード入力させたり、マウスクリックでパズルを完成させるなど、いずれも視覚に依存した操作をユーザーに強いる点で、アクセシビリティ上の問題が指摘されてきました。 先日発表されたCloudflare Turnstileは、CAPTCHAの代替をコンセプトとするサービスで、エンドユーザーに操作を求める場面が少ない印象がありました。これを使えば、アクセシビリティの問題は起きないのか、確認してみました。
Clock Icon2022.10.18

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

概要

Webフォームに対して、人間のアクセスとロボットのアクセスを見分ける技術として、CAPTCHAやパズル認証などが持ちいられてきました。

これらは主に、歪められて模様が追加された画像化文字を目で読んでキーボード入力させたり、マウスクリックでパズルを完成させるなど、いずれも視覚に依存した操作をユーザーに強いる点で、アクセシビリティ上の問題が指摘されてきました。

先日発表されたCloudflare Turnstileは、CAPTCHAの代替サービスで、エンドユーザーに操作を求める場面が少ない印象がありました。これを使えば、アクセシビリティの問題は起きないのか、確認してみました。

CAPTCHAのアクセシビリティの問題とは

CAPTCHAの例。歪んだ文字の画像が表示されており、それを読んで入力するテキストボックスがある。近くに、画像の文字が読めない場合に別の文字画像を表示するリンク、単語を音声で再生するリンクとヘルプのリンクがある

初期のCAPTCHAは、ボットによるWebフォームに対するスパムメッセージを防ぐために用いられます。一般的に、歪められて模様が追加された画像化文字を目で読んでキーボード入力することで、それが人間による入力であると判断します。

しかし、画像の中の文字を目で読んでテキストに入力するため、視覚に障害がある場合は利用できない方法でした。

CAPTCHAの実装にはいくつかの種類がありますが、このうち Googleが提供する reCAPTCHA をよく見かけます。現在提供されている reCAPTCHA にはいくつかのタイプがありますが、こうした視覚の問題に対処するために音声によるチャレンジが用意されています。これは、音声で読み上げられる数字をテキストボックスに入力するものです。

他方で、この音声CAPTCHAも画像化文字も、機械学習によって自動的に攻略する手段が開発され、それに対応するためか音声はより聞きづらく、画像化文字はより難読化されているケースもあるのか、人間であってもCAPTCHAをクリアできないケースもあるようです。

こうした問題に対し、例えば reCAPTCHA v3では、そもそもユーザーの操作が不要なタイプが提供されています。

Cloudflare Turnstileのアクセシビリティを確認する

Cloudflare Turnstileは、2022年9月28日に発表された、"alternative to CAPTCHA" がコンセプトのサービスです。

すでに DevelopersIOでも記事が掲載されています。

この記事では、基本的な動作について記載されていますが、アクセシビリティ面での動作を確認するため、同様のフォームを用意しました。

この Cloudflare Turnstile では、基本的にユーザーの操作は必要ないように作られています。しかしながら、何度かリロードなどの操作を行うと、"Verify you are human" というチェックボックスが表示されることがあります。

このチェックボックスを、スクリーンリーダー PC Talkerと、音声ブラウザNetReader Neoの組み合わせで検証しました。

Windows環境でスクリーンリーダー PC Talkerと音声ブラウザNetReader Neoを使ってCloudflare Turnstileを使ったサンプルフォームを読み上げさせているところ。何度かリロードしたタイミングで表示されるVerify you are humanというチェックボックスが表示される箇所の読み上げを確認している。

「Verify you are human 切り替え チェックなし スペースで切り替え」と読み上げられました。

仮に、音声ブラウザで操作中に、このチェックボックスが表示されても、ここにチェックボックスがあることは音声で把握することができ、スペースキーでチェックすることで、マウスと同等の操作が実現できることがわかりました。

今回は、実装時間の都合で追いつかなかったのですが、検証が終わった段階でコールバック関数を読む仕組みが用意されているので、ARIA-LIVE等で検証が終わったことをユーザーに伝える余地もありそうです。

まとめ

CAPTCHAのアクセシビリティに関する問題と、reCAPTCHAの簡単な現状、新しく発表されたCloudflare TurnstileのチェックボックスのUIを音声ブラウザで検証した結果について記載しました。

仮に、CAPTCHAを採用しなければならない場合は、こうしたアクセシビリティ上の問題について考慮して設計を行い、極力ユーザーの操作が必要ない実装を利用することとが重要だと考えます。

Photo credit: Tamar Weinberg on VisualHunt

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.